<!--商品管理-->
<template>
  <div class="warehouse_box">
    <!--   查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="仓库：" prop="warehouse">
          <el-select
            v-model="searchDate.warehouseName"
            placeholder="请选择仓库"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.warehouseName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上下架：" prop="phone">
          <el-select v-model="searchDate.status">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="上架" value="上架"></el-option>
            <el-option label="下架" value="下架"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--   新增模块-->
    <div class="add">
      <el-button type="primary" @click="openDialog">新增</el-button>
    </div>

    <!--   数据列表-->
    <div class="commodity_list">
      <el-table
        :data="showDate"
        :header-cell-style="{
          background: 'rgba(227,189,189,0.53)',
          border: 'none',
          color: '#000',
        }"
        border
        style="width: 100%"
      >
        <el-table-column label="ID" width="60">
          <template slot-scope="scope">
            <p>{{ scope.row.product.id }}</p>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" sortable width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.product.updateTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" prop="warehouseName">
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            <p>{{ scope.row.product.productName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" prop="image">
          <template slot-scope="scope">
            <el-image
               :src="scope.row.product.img"
               class="product_img"
               @click="openShowImg"
               fit>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品数量">
          <template slot-scope="scope">
            <p>{{ scope.row.product.quantity }}</p>
          </template>
        </el-table-column>
        <el-table-column label="空桶数量">
          <template slot-scope="scope">
            <p>{{ scope.row.product.recycle }}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态" sortable>
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.product.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <span :class="scope.row.product.status ? 'statusOk' : 'statusNo'">{{
              scope.row.product.status ? "上架" : "下架"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <span
              class="operation_delete"
              @click="deleteWarehouse(scope.$index)"
              >删除</span
            >
            <span class="operation_update" @click="queryLog">日志</span>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <div class="list_bottom">
        <div class="list_length">
          共<span>{{ warehouseList.length }}</span
          >条
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-count="10"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="warehouseList.length"
          background
          layout=" prev, pager, next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <showImg v-if="isShowImg" :images="imgs"></showImg>
      <!--      编辑弹窗-->
      <pop v-if="isShow" @addList="addList" @listenChild="listenChild"></pop>
    </div>
  </div>
</template>
<script>
  import pop from "./pop";
import showImg from "../../../../components/showImg";
export default {
  components: { pop,showImg },
  data() {
    return {
      searchDate: {
        warehouseName: "", // 仓库名
        status: "", //上下架
      },
      isShow: false,
      isShowImg:false,
      imgs:[],
      // 表格数据
      warehouseList: [
        {
          warehouseName: "集美仓库",
          product:
            // 商品数量
            // 空桶数量
            {
              id: 1,
              productName: "百岁山",
              quantity: 10,
              recycle: 0,
              updateTime: "2021-04-16 16:35:38",
              status: false,
              img: 'https://qny.samt.top/2SN2472MG0wpji.jpg'
            },
        },
      ],
      updata: {},
      listSearch: [],
      currentPage: 1, // 当前页数
      pageSize: 10, // 没意思的数据个数
      showDate: [],
    };
  },
  mounted() {
    this.showTable();
  },
  methods: {
    openShowImg() {
      this.isShowImg = true
    },
    // 数据切片分页渲染表格
    showTable() {
      // 加载表格数据,模拟请求到数据
      this.showDate = this.warehouseList.slice(
        this.pageSize * (this.currentPage - 1),
        this.pageSize * this.currentPage
      );
    },
    //pageSize 改变时触发
    handleSizeChange(val) {
      // .slice((currentPage-1)*pageSize,currentPage*pageSize)
      this.pageSize = val;
      this.showTable();
    },
    // currentPage 改变时会触发的函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showTable();
    },
    // 查询
    onSubmit() {
      this.$message({
        message:
          "仓库名：" +
          this.searchDate.warehouseName +
          "    配送员手机号" +
          this.searchDate.warehouseAddress,
        type: "success",
      });
    },

    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },

    // 拉起编辑弹窗
    openDialog() {
      // 调用子组件的开启
      this.isShow = true;
      this.isOpen = true;

    },
    // 新增数据
    addList(list) {
      // 新增id
      let listDate = list;
      // listDate.id = this.warehouseList.length + 1;
      // push
      listDate.forEach((item) => {
        this.warehouseList.push(item);
      });
      this.warehouseList.forEach(item => {
        this.imgs.push(item.img)
      })
      this.showTable();
    },

    // 删除仓库数据
    deleteWarehouse(index) {
      this.warehouseList.splice(index, 1);
      this.imgs.splice(index, 1);
      this.showTable();
    },
    // 查看日志
    queryLog() {
      this.$message({
        message: "查看日志",
        type: "success",
      });
    },
    listenChild(e) {
      this.isShow = e;
    },
  },
};
</script>
<style scoped>
.warehouse_box {
  display: flex;
  flex-direction: column;
}

.commodity_list {
  margin-top: 20px;
}

.operation_delete,
.operation_qurey,
.operation_update {
  cursor: pointer;
}

.operation_qurey,
.operation_update {
  color: #5749ff;
  margin: 0 5px;
}

.operation_delete {
  color: red;
  margin: 0 5px;
}

.statusOk {
  color: #42b983;
  font-weight: 700;
}

.statusNo {
  color: #ff0000;
  font-weight: 700;
}

/deep/ .commodity_list .el-table .el-table__cell {
  padding: 0 !important;
}

.commodity_list .el-table_1_column_5 .cell {
}

.product_img {
  margin-top: 7px;
  width: 40px;
  height: 40px;
}
</style>
